import styles from './index.less';
import { FilterOutlined } from '@/utils/antdIcons';
import FilterColumnDropdown from './FilterColumnDropdown';
export const getColumns = ({ handleFilter, filterChecked }) => {
  return [
    {
      title: '场站名称',
      dataIndex: 'deptName',
      key: 'deptName',
      width: 230,
      sorter: true,
      filters: [],
      filterDropdown: ({ confirm }) => {
        return (
          <FilterColumnDropdown
            confirm={confirm}
            id={'deptName'}
            handleFilter={handleFilter}
            visible={true}
          />
        );
      },
      filterIcon: () => {
        let color = filterChecked['deptName']?.length ? '#1E7CE8' : '#BDBDBD';

        return <FilterOutlined style={{ color: color }} />;
      },
      render: (val) => {
        return <div style={{ padding: '16px' }}>{val}</div>;
      },
    },
    {
      title: '场站编号',
      dataIndex: 'deptNum',
      key: 'deptNum',
      width: 140,
      sorter: true,
      filters: [],
      filterDropdown: ({ confirm }) => {
        return (
          <FilterColumnDropdown confirm={confirm} id={'deptNum'} handleFilter={handleFilter} />
        );
      },
      filterIcon: () => {
        let color = filterChecked['deptNum']?.length ? '#1E7CE8' : '#BDBDBD';

        return <FilterOutlined style={{ color: color }} />;
      },
      render: (val) => {
        return <div style={{ padding: '16px' }}>{val}</div>;
      },
    },
    {
      title: '三种人权限',
      dataIndex: 'three',
      key: 'three',
      filters: [],
      filterDropdown: ({ confirm }) => {
        return <FilterColumnDropdown confirm={confirm} id={'three'} handleFilter={handleFilter} />;
      },
      filterIcon: () => {
        let color = filterChecked['three']?.length ? '#1E7CE8' : '#BDBDBD';

        return <FilterOutlined style={{ color: color }} />;
      },
      render: (val, record) => {
        let str = [],
          arr = [
            { key: 'principalDesc', desc: '负责人', color: '#27AE60' },
            { key: 'singerDesc', desc: '签发人', color: '#F2994A' },
            { key: 'licensorDesc', desc: '许可人', color: '#2F80ED' },
          ];

        arr.forEach((item, index) => {
          let data = record?.[item.key];
          if (data?.length) {
            str.push(
              <div className={styles.personPowerThree} key={record.deptId + item.key + index}>
                <span style={{ borderColor: item.color, color: item.color }}>{item.desc}</span>
                {data.join('，')}
              </div>,
            );
          }
        });
        return str?.length ? str : <div style={{ padding: '16px' }}>-</div>;
      },
    },
  ];
};
